<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2024-01-06 15:58:38
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2024-03-25 17:20:06
 * @FilePath: \Song-ui\src\App.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import type { ButtonInstance } from './components/Button/type'
import type { NameType } from './components/Collapse/types'
import Button from './components/Button/Button.vue'
import Collapse from './components/Collapse/Collapse.vue'
import Item from './components/Collapse/CollapseItem.vue'
import Icon from './components/Icon/Icon.vue'
import Alert from './components/Alert/Alert.vue'
import Tooltip from './components/Tooltip/Tooltip.vue'
import DropDown from './components/DropDown/DropDown'
import type { MenuOption } from './components/DropDown/type'
import type { TooltipInstance } from './components/Tooltip/type'
import type { Options } from '@popperjs/core'
const buttonRef = ref<ButtonInstance | null>(null)
const openValue = ref<NameType[]>(['a'])
const tooltipRef = ref<TooltipInstance | null>(null)

const toolOptions: Partial<Options> = {
  placement: 'bottom'
}

const menuOptions: MenuOption[] = [
  { key: 1, label: h('b', 'this is content') },
  { key: 2, label: 'label2', disabled: true },
  { key: 3, label: 'label3', divided: true },
  { key: 4, label: 'label4' }
]

const collapseChange = (item: NameType[]) => {
  console.log(item.length, typeof item)
}

onMounted(() => {
  setTimeout(() => {
    openValue.value = ['a', 'b']
  }, 2000)
})

const open = () => {
  tooltipRef.value?.show()
}
const close = () => {
  tooltipRef.value?.hide()
}

const inlineConsole = (...args: any) => {
  console.log(...args)
}
</script>

<template>
  <DropDown
    placement="bottom"
    trigger="click"
    :menu-options="menuOptions"
    @visible-change="e => inlineConsole('visible-change', e)"
    @select="e => inlineConsole('select', e)"
    ref="tooltipRef"
  >
    <img src="./assets/test.jpg" width="125" height="125" />
  </DropDown>
  <!-- <Tooltip ref="tooltipRef" placement="right" trigger="click" manual :open-delay="1000" :close-delay="1000">
    <img src="./assets/test.jpg" width="125" height="125" />
    <template #content>
      <h3>hello tooltips</h3>
    </template>
  </Tooltip> -->
  <hr />
  <Button type="primary" round disabled ref="buttonRef">Test Button</Button>
  <Button @click="open" plain>Plain Button</Button>
  <Button @click="close" round>Round Button</Button>
  <Button circle>Circle</Button>
  <Button disabled>Disabled Button</Button>
  <Button type="primary">Primary Button</Button>
  <Button type="success">Success Button</Button>
  <Button type="info">Info Button</Button>
  <Button type="danger">Danger Button</Button>
  <Button type="warning">Warning Button</Button>
  <Button type="primary" plain>Primary Button</Button>
  <Button type="success" plain>Success Button</Button>
  <Button type="info" plain>Info Button</Button>
  <Button type="danger" plain>Danger Button</Button>
  <Button type="warning" plain>Warning Button</Button><br /><br />

  <Button type="danger" size="large" plain loading>Danger Button</Button>
  <Button type="warning" size="large" plain icon="arrow-up">Warning Button</Button>

  <Collapse v-model="openValue" @change="collapseChange">
    <Item name="a">
      <template #title>
        <h1>nice Title</h1>
      </template>
      <h1>headline title</h1>
      <div>this is Content 1</div>
    </Item>
    <Item name="b" title="nice b 2">
      <div>this is Content 2</div>
    </Item>
    <Item name="c" title="nice c 3" disabled>
      <div>this is Content 3</div>
    </Item>
  </Collapse>

  <Icon icon="user-secret" />
  <div class="change">
    <Icon icon="check" />
  </div>
  <Icon icon="arrow-up" size="2xl" type="primary" color="red" /><br /><br />

  <Alert content="看看效果" description="正常效果" type="success" /><br />
  <Alert content="看看效果" type="danger" center /><br />
  <Alert content="看看效果" type="primary" :closable="false" /><br />
  <Alert content="看看效果" type="warning" :closable="false" /><br />
  <Alert content="看看效果" /> <br />
  <Alert content="看看效果" type="success" effect="dark">
    <template #title> title插槽看看效果 </template> </Alert
  ><br />
  <Alert content="看看效果" type="danger" effect="dark">
    <template #title> title插槽看看效果 </template>
    <template> 内容 </template> </Alert
  ><br />
  <Alert content="看看效果" type="primary" effect="dark" /><br />
  <Alert content="看看效果" type="warning" effect="dark" :closable="false" /><br />
  <Alert content="看看效果" effect="dark" />
</template>

<style>
.sg-tolltip__trigger {
  width: 130px;
}
</style>
